<template>
	<!-- 首页的下面的日志部分 -->
	<view class="logComponent">
		<view class="logfont1" v-if="propsData.createDate != null">{{ propsData.createDate }}</view>
		<!-- 下面白色区域 -->
		<view class="logfont2" :style="{ height: `${style.logfont2.height}rpx` }" @click="isStartButton">
			<view class="image">
				<img src="@/static/log.png" alt="" />
			</view>
			<view class="logfont2Right">
				<view class="font font-head" :style="{ display: style.fontHead.display }">
					<view class="">{{ propsData.users }}</view>
					<view class="">--</view>
					<view class="">{{ propsData.logText }}</view>
				</view>
				<view class="font font-footer" :style="{ display: style.fontFooter.display }">
					<view class="font-footer-font">
						<view class="font1">元器件：</view>
						<view>{{ propsData.componentPart == null ? '空' : propsData.componentPart }}</view>
					</view>
					<view class="font-footer-font">
						<view class="font1">地址：</view>
						<view>{{ propsData.project == null ? '空' : propsData.project }}</view>
					</view>
					<view class="font-footer-font">
						<view class="font1">差旅名：</view>
						<view>{{ propsData.businessTrip == null ? '空' : propsData.businessTrip }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			style: {
				logfont2: {
					height: 120
				},
				fontFooter: {
					display: 'none'
				},
				fontHead: {
					display: 'flex'
				}
			},
			isStart: false
		};
	},
	methods: {
		isStartButton() {
			this.isStart = !this.isStart;
		}
	},
	watch: {
		isStart(newValue, oldValue) {
			if (newValue == true) {
				this.style.logfont2.height = 300;
				this.style.fontFooter.display = 'flex';
				this.style.fontHead.display = 'none';
			} else {
				this.style.logfont2.height = 120;
				this.style.fontFooter.display = 'none';
				this.style.fontHead.display = 'flex';
			}
		}
	},
	props: {
		propsData: {
			require: true
		}
	}
};
</script>

<style scoped>
.logfont1 {
	margin-top: 30rpx;
	font-weight: 700;
}
/* 白色区域 */
.logfont2 {
	width: 100%;
	height: 120rpx;
	background-color: white;
	border-radius: 10%;
	margin-top: 20rpx;
	position: relative;
	transition: 0.3s;
}
/* 图片 */
.image {
	position: absolute;
	margin-left: 20rpx;
	width: 50rpx;
	height: 100%;
	display: flex;
	align-items: center;
}

.logfont2 img {
	width: 50rpx;
	height: 50rpx;
}

/* 文字区域 */
.logfont2Right {
	width: calc(100% - 90rpx);
	height: 100%;
	margin-left: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.font {
	width: 100%;
	font-size: 33rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 被隐藏字体 */
.font-footer {
	margin-top: 0rpx;
	font-size: 30rpx;
	display: none;

	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 8px;
	transition: all 0.3s ease;
}
.font-footer-font {
	font-size: 33rpx;
	color: #2982cf;
}
.font-footer-font .font1 {
	font-size: 25rpx;
	color: #a2a2a2;
}

/* 信息行样式 */
.font-footer-font {
	display: flex;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
	transition: all 0.2s ease;
}

/* 标签样式 */
.font1 {
	width: 80px;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.5px;
}

/* 内容样式 */
.font-footer-font > view:nth-child(2) {
	font-weight: 400;
	color: #333;
	letter-spacing: 0.3px;
	flex: 1;
}
</style>
